/**
 * Created by vector on 2017/11/17.
 *
 * 信息采集图表页面
 */

import React from 'react';
import {
    View,
    Text,
    ToastAndroid,
    StyleSheet,
    StatusBar,
    TouchableOpacity,
    Image,
    Dimensions,
} from 'react-native';
import Echarts from 'native-echarts';

const {height, width} = Dimensions.get('window');
const ChartsDataApi = "http://192.168.1.104:8087/v1/datas?p_id=6";

export default class Chart extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dailyDatasX:[],
            dailyDatasY:[],
            hourDatasX:[],
            hourDatasY:[]
        };
    }

    componentWillMount() {
        this.getDataFromApi();
    }

    back() {
        this.props.navigator.pop();
    }


    async getDataFromApi() {
        try {
            let response = await fetch(ChartsDataApi);
            let responseJson = await response.json();

            var dailyDatas = responseJson.dailyDatas;
            var hourDatas = responseJson.hourDatas;


            var dailyDatasX = [];
            var dailyDatasY = [];

            var hourDatasX = [];
            var hourDatasY = [];

            for (var i=0; i<dailyDatas.length; i++)
            {
                dailyDatasX.push(dailyDatas[i].save_time);
                dailyDatasY.push(dailyDatas[i].deal_datas);
            }

            for (var i=0; i<hourDatas.length; i++)
            {
                hourDatasX.push(hourDatas[i].save_time.substr(5));
                hourDatasY.push(hourDatas[i].sum_deal_datas);
            }


            console.log(dailyDatasX);
            this.setState({
                dailyDatasX:dailyDatasX,
                dailyDatasY:dailyDatasY,
                hourDatasX:hourDatasX,
                hourDatasY:hourDatasY
            });
        }
        catch (error){
            ToastAndroid.showWithGravity(
                '网络错误',
                ToastAndroid.SHORT,
                ToastAndroid.CENTER
            )
        }
    }

    render() {
        var dayChartOption = {
            backgroundColor: 'rgb(28,28,29)',
            title: {
                show: true,
                text: '日采集量',
                textStyle:{
                    color:'#ffffff',
                },
                left:20
            },
            legend: {
                show: false
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                show: true,
                left: 20,
                right: 50,
                top: 40,
                bottom: 20,
                containLabel: true,
                borderColor: 'rgb(60,56,83)',
            },
            xAxis: {
                data: this.state.dailyDatasX,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#ffffff',
                    }
                },
                name: "时间",
                nameTextStyle: {
                    color: '#ffffff',
                },
                boundaryGap: false,
                splitLine: {                  //设置折线图竖直线
                    show: false,
                    lineStyle: {  //线条的样式
                        color: 'rgb(60,56,83)'
                    },

                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#ffffff',
                    }
                },
                name:"采集量",
                splitLine: {
                    show: true,
                    lineStyle: {  //线条的样式
                        color: 'rgb(60,56,83)'
                    },

                },
            },
            series: [{
                name: '采集量',
                type: 'line',
                symbol: 'emptyCircle',
                symbolSize: 5,
                clipOverflow: true,
                smooth: false,
                areaStyle: {normal: {color: "rgb(25,44,73)"}}, //曲线下方的面积的颜色
                data: this.state.dailyDatasY,
                itemStyle: {  //折线拐点的样式
                    normal: {
                        color: 'rgb(255,255,255)',  //折线拐点的颜色
                    }
                },
                lineStyle: {  //线条的样式
                    normal: {
                        color: 'rgb(23,73,175)',  //折线颜色
                        width: 1,
                    },
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                },
            }],
        };

        var hourChartOption = {
            backgroundColor: 'rgb(28,28,29)',
            title: {
                show: true,
                text: '每小时采集量',
                textStyle:{
                    color:'#ffffff',
                },
                left:20
            },
            legend: {
                show: false
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                show: true,
                left: 20,
                right: 50,
                top: 40,
                bottom: 20,
                containLabel: true,
                borderColor: 'rgb(60,56,83)',
            },
            xAxis: {
                data: this.state.hourDatasX,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#ffffff',
                    }
                },
                name: "时间",
                nameTextStyle: {
                    color: '#ffffff',
                },
                boundaryGap: false,
                splitLine: {                  //设置折线图竖直线
                    show: false,
                    lineStyle: {  //线条的样式
                        color: 'rgb(60,56,83)'
                    },

                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#ffffff',
                    }
                },
                name:"采集量",
                splitLine: {
                    show: true,
                    lineStyle: {  //线条的样式
                        color: 'rgb(60,56,83)'
                    },

                },
            },
            series: [{
                name: '采集量',
                type: 'line',
                symbol: 'emptyCircle',
                symbolSize: 5,
                clipOverflow: true,
                smooth: false,
                areaStyle: {normal: {color: "rgb(25,44,73)"}}, //曲线下方的面积的颜色
                data: this.state.hourDatasY,
                itemStyle: {  //折线拐点的样式
                    normal: {
                        color: 'rgb(255,255,255)',  //折线拐点的颜色
                    }
                },
                lineStyle: {  //线条的样式
                    normal: {
                        color: 'rgb(23,73,175)',  //折线颜色
                        width: 1,
                    },
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                },
            }],
        };

        return (
            <View style={styles.container}>
                <StatusBar
                    backgroundColor="rgb(28,28,29)"
                    barStyle="light-content"
                />
                <View style={styles.navView}>
                    <TouchableOpacity activeOpacity={0.5} onPress={this.back.bind(this)}>
                        <Image source={require('./icon/nav_back_icon.png')} style={styles.navIconLeft}/>
                    </TouchableOpacity>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                        <Text style={{color:'#ffffff',fontSize:25}}>
                            信息采集状况
                        </Text>
                    </View>
                    <View style={styles.navIconRight}>
                    </View>
                </View>
                <View style={styles.bottomView}>
                    <Echarts option={hourChartOption} height={250} style={{marginTop:40}}/>
                    <View style={{width:width,height:30}}/>
                    <Echarts option={dayChartOption} height={250}/>
                </View>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'rgb(28,28,29)',
    },
    navView: {
        backgroundColor:'rgb(28,28,29)',
        width:width,
        height:50,
        flexDirection:'row',
        alignItems:'center',
    },
    navIconLeft: {
        width:40,
        height:40,
        marginLeft:10,
    },
    navIconRight: {
        width:28,
        height:28,
        marginRight:20
    },
    bottomView:{
        width:width,
        height:height-20,
        marginTop:30
    }
});